<template>
    <div v-loading="loading">
        <div class="clearfix" style="margin:1% 3%;">
            <el-button type="primary"  icon="el-icon-plus" class="fl" @click="add">新增组织架构</el-button>
            <el-button type="success"  icon="el-icon-download" class="fr"  @click="exports">导出组织架构</el-button>
        </div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-tag type="success" effect="dark" class="fl">部门</el-tag>
            </div>
            <div style="overflow-y:scroll;height:400px;">
                <div v-for="item in departmentList" :key="item.id" class="text item" v-if="item.name!=''">
                    <span class="fl">{{item.name}}</span>
                    <el-button type="text" class="fr option" icon="el-icon-delete" @click="deleteHr(item.id)"></el-button>
                    <el-button type="text" class="fr option" icon="el-icon-edit" @click="edit(item)"></el-button>
                </div>  
            </div> 
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-tag type="info" effect="dark" class="fl">组</el-tag>
            </div>
            <div style="overflow-y:scroll;height:400px;">
                <div v-for="item in groupList" :key="item.id" class="text item" v-if="item.name">
                    <span class="fl">{{item.name}}</span>
                    <el-button type="text" class="fr option" icon="el-icon-delete" @click="deleteHr(item.id)"></el-button>
                    <el-button type="text" class="fr option" icon="el-icon-edit" @click="edit(item)"></el-button>
                </div>   
            </div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-tag type="danger" effect="dark" class="fl">部</el-tag>
            </div>
            <div style="overflow-y:scroll;height:400px;">
                <div v-for="item in partList" :key="item.id" class="text item" v-if="item.name">
                    <span class="fl">{{item.name}}</span>
                    <el-button type="text" class="fr option" icon="el-icon-delete" @click="deleteHr(item.id)"></el-button>
                    <el-button type="text" class="fr option" icon="el-icon-edit" @click="edit(item)"></el-button>
                </div>   
            </div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-tag type="warning" effect="dark" class="fl">区</el-tag>
            </div>
            <div style="overflow-y:scroll;height:400px;">
                <div v-for="item in areaList" :key="item.id" class="text item" v-if="item.name">
                    <span class="fl">{{item.name}}</span>
                    <el-button type="text" class="fr option" icon="el-icon-delete" @click="deleteHr(item.id)"></el-button>
                    <el-button type="text" class="fr option" icon="el-icon-edit" @click="edit(item)"></el-button>
                </div>   
            </div>
        </el-card>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" v-loading="dialogLoading"  width="60%"
        :close-on-click-modal="false" >
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="4" align="right"><span>名称：</span></el-col>
                <el-col :span="12" align="left">
                    <el-input v-model="name" placeholder="请输入名称" :disabled="id==''?false:true"></el-input>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="4" align="right"><span>类型：</span></el-col>
                <el-col :span="12" align="left">
                    <el-select v-model="type" placeholder="请选择" :disabled="id==''?false:true">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="4" align="right"><span>是否启用：</span></el-col>
                <el-col :span="12" align="left">
                    <el-select v-model="enabled" placeholder="请选择">
                        <el-option
                        v-for="item in enabledOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="24" align="right">
                    <el-button type="primary" @click="sureAdd">确定</el-button>
                    <el-button type="danger" @click="dialogFormVisible=false;">取消</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            loading:false,
            departmentList:[],
            groupList:[],
            partList:[],
            areaList:[],
            dialogFormVisible:false,
            dialogLoading:false,
            dialogTitle:"",
            id:"",
            name:"",
            type:"",
            options:[
                {
                    label:"部门",
                    value:"_department"
                },
                {
                    label:"组",
                    value:"_group"
                },
                {
                    label:"部",
                    value:"_part"
                },
                {
                    label:"区",
                    value:"_area"
                },
            ],
            enabled:true,
            enabledOptions:[
                {
                    label:"启用",
                    value:true
                },
                {
                    label:"禁用",
                    value:false
                },
            ]
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        requestInfo(){
            this.loading=true;
            this.departmentList=[];
            this.groupList=[];
            this.partList=[];
            this.areaList=[];
            this.getRequest('/department/manage').then(resp =>{
                this.loading=false;
                if (resp && resp.data.status == 200){
                    for(var i=0;i<resp.data.obj.length;i++){
                        switch(resp.data.obj[i].type){
                            case "_department" :
                                this.departmentList.push(resp.data.obj[i]);
                                break;
                            case "_group" :
                                this.groupList.push(resp.data.obj[i]);
                                break;
                            case "_part" :
                                this.partList.push(resp.data.obj[i]);
                                break;
                            case "_area" :
                                this.areaList.push(resp.data.obj[i]);
                                break;
                            default :
                                break;
                        }
                    }
                }
            })
        },
        initData(){
          this.requestInfo()
        },
        add(){
            this.dialogTitle="新增组织架构";
            this.dialogFormVisible=true;
            this.id="";
            this.name="";  
            this.type="";  
            this.enabled=true;  
        },
        sureAdd(){
            //新增
            if(this.id==""){
                if(this.name==""){
                    this.common.showToast("info","请输入名称")
                    return false;
                }else if(this.type==""){
                    this.common.showToast("info","请输入类型")
                    return false;
                }
                this.dialogLoading=true;
                this.putRequest("/department/add",{
                    name:this.name,
                    type:this.type,
                    enabled:this.enabled,
                }).then(resp =>{
                    this.dialogLoading=false;
                    if (resp && resp.data.status == 200){
                        this.common.showToast('success','新增成功');
                        this.dialogFormVisible=false;
                        this.requestInfo();
                    }
                })
            }else{
                this.dialogLoading=true;
                this.putRequest("/department/update",{
                    id:this.id,
                    name:this.name,
                    type:this.type,
                    enabled:this.enabled,
                }).then(resp =>{
                    this.dialogLoading=false;
                    if (resp && resp.data.status == 200){
                        this.common.showToast('success','修改成功');
                        this.dialogFormVisible=false;
                        this.requestInfo();
                    }
                })
            }

            
        },
        edit(item){
            this.dialogTitle="修改";
            this.dialogFormVisible=true;  
            this.id=item.id;
            this.name=item.name;  
            this.type=item.type;  
            this.enabled=item.enabled;  

        },
        exports(){
            var address=`/department/export`
            this.common.downloadFile(address);
        },
        // 删除
        deleteHr(ID) {
            this.$confirm("将删除该组织架构, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
                this.loading = true;
                this.deleteRequest("/department/" + ID +"?id="+ID).then(resp => {
                    this.loading = false;
                    if (resp && resp.data.status == 200) {
                        this.common.showToast('success','删除成功')
                        this.requestInfo();
                    }
                });
            })
            .catch(() => {});
        },  
    },       
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input,.el-select{
    width: 70%;
}
.el-card{
  display: inline-block;
  width: 45%;
  height: 500px;
  margin:1%;
}
.el-card .item{
    height: 50px;
    line-height: 50px;
}
.option{
    color: #f6061b;
    margin: 0px;
    padding: 10px;
    
}
</style>
